<template>
    <div>
        <video-play
            ref="playerRef"
            v-bind="options"
            :src="src"
            @play="onPlay"
            @pause="onPause"
            @timeupdate="onTimeupdate"
            @canplay="onCanplay"
        />
    </div>
</template>

<script setup lang="ts">
import {reactive, shallowRef} from 'vue'
import 'vue3-video-play/dist/style.css'
import VideoPlay from 'vue3-video-play'
// ts写法
const props = withDefaults(defineProps<{
    src: string,
    width?: string,
    height?: string,
    poster?: string
}>(), {})

const playerRef = shallowRef(VideoPlay)

const options = reactive({
    color: 'var(--el-color-primary)', //主题色
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    lightOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
    title: '', //视频名称
    poster: '', //封面
    ...props
})

function play() {
    playerRef.value.play()
}

function pause() {
    playerRef.value.pause()
}

const onPlay = (event: any) => {
    console.log(event, '播放')
}

const onPause = (event: any) => {
    console.log(event, '暂停')
}

const onTimeupdate = (event: any) => {
    console.log(event, '时间更新')
}

const onCanplay = (event: any) => {
    console.log(event, '可以播放')
}

defineExpose({
    play,
    pause
})
</script>
